<template>
  <div class="container">
    <p class="h1">深圳大学城学生公寓住宿协议</p>
    <p class="number">
      编号：
      <span class="signNumber">{{
        signInfo.contractNumber ? signInfo.contractNumber : "DXC-GY-2022-00000"
      }}</span>
    </p>
    <div class="headBox">
      <p class="text">甲方： 深圳大学城管理服务中心校园服务部</p>
      <div class="text">
        乙方：<b> {{ signInfo.name }} </b>
        <span
          >，入住 <b> {{ signInfo.stayInPlace }}{{ signInfo.signRoomNo }}</b>
        </span>
        <p style="text-indent: 0.3rem">
           <b>{{ signInfo.schoolName }} {{ signInfo.collageName }} {{ signInfo.className }} {{ signInfo.majorName }}</b>
        </p>
      </div>
    </div>

    <div class="contentBox">
      <div class="outbox">
        <p class="text_word">
          为加强学生公寓管理，明确甲、乙双方的权利和义务，根据国家、省、市有关规定及《深圳大学城学生公寓管理规定》，签订本协议。
        </p>
        <section class="wrap" v-for="item in signList" :key="item.id">
          <p class="h2">{{ item.clause }}</p>
          <p
            v-for="item_child in item.childrenList"
            :key="item_child.id"
            class="text_word"
          >
            {{ item_child.clause }}
          </p>
        </section>
      </div>
    </div>

    <div class="endBox">
      <p class="text_word">甲方：深圳大学城管理服务中心校园服务部</p>
      <div class="text_word esighName">
        乙方：
        <div class="esigh_result">
          <img :src="signaturePic" alt="" />
        </div>
      </div>
      <p class="text_word">
        身份证号：<b>{{ signInfo.idNumber }}</b>
      </p>
      <p class="text_word">
        协议号（即校园卡号）：<b>{{ signInfo.sno }}</b>
      </p>
      <p class="text_word">
        协议签订时间：<b>{{ reversedMessage }}</b>
      </p>
    </div>
  </div>
</template>
<script>
import { formatDateTime } from "@/util/dateFormat";

// import textPart from "./textpart.vue";
export default {
  components: {
    // textPart,
  },
  props: ["signInfo", "signList"],
  data() {
    return {
      signaturePic: this.signInfo.signaturePic,
    };
  },
  watch: {
    signInfo: {
      handler(data) {
        if (data) {
          // console.log("ggg", signInfo);
          this.signaturePic = data.signaturePic;
        }
      },
      // deep: true
    },
  },
  // 计算属性
  computed: {
    reversedMessage() {
      return formatDateTime(this.signInfo.createTime);
    },
  },
  created() {
    // console.log("hhh",this.signList);
  },
  methods: {},
};
</script>

<style scoped lang="less">
.classWord {
  margin-top: 0.05rem;
  border-bottom: 0.01rem solid #eee;
}
.signNumber {
  color: #b90f0f;
  font-weight: bold;
}

.container {
  padding: 10px 30px;
  padding-top: 26px;
  font-size: 16px;
  color: #000;
  .headBox {
    margin-top: 30px;
  }
  .contentBox {
    margin-top: 10px;
  }
  .endBox {
    padding-top: 20px;
    margin-bottom: 30px;
    .tip {
      margin-top: 20px;
    }
    .esighName {
      // height: 100%;
      display: flex;
      align-items: center;
      .esigh_result {
        width: 180px;
        // height: 32px;
        img {
          width: 100%;
          margin-left: -50px;
        }
      }
    }
  }
}
</style>
